<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        .no-border {
            border: none;
            width: 200px;
        }
    </style>
</head>

<body>
    <!-- 轮播图列表 -->
    <div class="banner-list">
        <table id="banner-table">

        </table>
        注：如果要修改数据，直接在页面上点击需要修改的文字就行，但是必须要点击“修改”按钮才能修改成功
    </div>
    <hr />
    <div class="banner-add">
        编号：<input id="id" type="text" name="id" placeholder="编号不要重复" /><br />
        图片地址：<input id="img" type="text" name="img" /><br />
        超链：<input id="url" type="text" name="url" /><br />
        <input type="button" value="添加" onclick="addBanner()" />
    </div>
</body>

</html>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="./js/tools.js"></script>
<script>



    $(function () {
        getData();
    });

    function getData() {
        $.get("bannerGet.php", function (data) {
            let htmlStr = `
			<tr>
				<td>编号</td>
				<td>图片地址</td>
				<td>超链</td>
				<td>操作</td>
			</tr>			
			`;
            data.forEach(function (item, idx) {
                htmlStr += `<tr>
				<td>${item.id}</td>
				<td>
					<input class="no-border" type="text" value="${item.img}" >
				</td>
				<td>
					<input class="no-border" type="text" value="${item.url}" >
				</td>
				<td>
					<input  type="button" value="删除" onclick="deleteImg('${item.id}')" >
					<input  type="button" value="修改" onclick="updateImg(${idx},'${item.id}')"  >
				</td>
			</tr>`;
            });
            $("#banner-table").html(htmlStr);
        }, "json");
    }

    function addBanner() {
        let objs = {
            "id": "编号", "img": "图片地址", "url": "超链"
        }
        if (!preDo(objs)) {
            return false;
        }

        $.post(
            "bannerAdd.php",
            {
                id: $("#id").val(),
                img: $("#img").val(),
                url: $("#url").val()
            },
            function (result) {
                // if(result=="1"){
                getData();
                // }else{
                // 	alert("添加失败");
                // }				
            }
        );
    }

    function deleteImg(id) {
        if (confirm("亲，真的要删除吗？")) {
            $.get("bannerDel.php", { id }, function (data) {
                console.log("data", data);
                // if(data=="success"){
                console.log("getData");
                getData();
                // }
            });
        }
    }

    function updateImg(idx, id) {
        let $td = $("#banner-table tr:nth-child(" + (idx + 2) + ")").children();
        let img = $td.eq(1).children().val();
        let url = $td.eq(2).children().val();
        $.post("bannerUpdate.php", { id, img, url }, function () {
            alert("修改成功！");
            // getData();
        });
    }


</script>